<template>
  <div class="box">
    <!-- 登录框 -->
    <div class="form">
      <div class="title">
        <h3 style="margin:0 8px">登录</h3>
        <span style="margin:0 5px;font-size: 15px; ">欢迎访问</span>
        <span style="margin:0 5px;font-size: 15px;">商城商家平台</span>
      </div>
      <div class="form_main">
        <el-input
          style="width:300px"
          @blur="blurAcc"
          placeholder="请输入手机号"
          v-model="account"
          clearable
          prefix-icon="el-icon-user-solid"
          maxlength="11"
        ></el-input>
        <br />
        <div
          style="display:flex; height:40px;align-items: center; justify-content: space-between;margin:20px 0"
        >
          <el-input
            prefix-icon="el-icon-s-goods"
            style="width:160px"
            v-model="securityCode"
            maxlength="4"
            placeholder="请输入验证码"
          ></el-input>
          <el-button
            style="float:right;width:130px;height:40px"
            type="primary"
            @click="verifyCode"
            v-if="!time"
          >发送验证码</el-button>
          <el-button
            style="float:right;width:130px;height:40px;padding:0"
            type="primary"
            v-else
          >({{time}}秒)后重新发送</el-button>
        </div>
        <div style="width:300px;display:flex;justify-content: space-around;margin:10px 0">
          <el-button type="primary" style="width:300px" @click="goLogin">登录</el-button>
        </div>
        <p class="zhu">注：如果没有账号,请去商城App注册哦！</p>
      </div>
    </div>
    <!-- left字 -->
    <div class="leftTitle">
      <h1>让</h1>
      <h1 style="margin:0 20px">数</h1>
      <h1 style="margin:0 40px">据</h1>
      <h1 style="margin:0 60px">改</h1>
      <h1 style="margin:0 80px">变</h1>
      <h1 style="margin:0 100px">生</h1>
      <h1 style="margin:0 120px">活</h1>
    </div>

    <!-- 背景图 -->
    <div class="bg">
      <!-- 旋转图 -->
      <div class="rotateImg">
        <img src="../assets/img/page1_0.png" alt />
        <img style="display:none" src="../assets/img/page1_2.png" alt />
        <img src="../assets/img/page1_2.png" alt />
        <img src="../assets/img/page1_1.png" alt />
      </div>
      <div style="text-align: center;position: relative;">
        <div style="position: absolute;top:20%;left:30%">
          <h1 style="color:#2ec0f6">商城商家数据平台</h1>
        </div>
        <img src="../assets/img/page1_3.jpg" alt />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Login",
  data() {
    return {
      account: "", // 手机号
      securityCode: "", // 验证码
      time: "", // 计时
    };
  },
  created() {
    console.log(JSON.parse(sessionStorage.getItem("userMsg")));
    if(JSON.parse(sessionStorage.getItem("userMsg"))){
      this.$router.push('/home')
      this.$message("您已登录成功!")
    }else{
      this.$message("请用手机号登录!")
    }
  },
  methods: {
    // 验证账号
    blurAcc() {
      var acc = /^1[3|4|5|7|8][0-9]{9}$/;
      if (acc.test(this.account) != true) {
        this.$message("输入手机号");
        this.account = "";
      }
    },

    // 获取验证码
    verifyCode() {
      if (this.account != "") {
        this.$post("/login/oauth2/sendSms", {
          tel: this.account,
          type: 1,
        }).then((res) => {
          console.log(res.data);
          if (res.data.code != 200) {
            this.$message(res.data.msg);
          } else {
            // 开始60秒倒计时
            this.time = 60;
            this.jishi = setInterval(() => {
              this.time--;
            }, 1000);
          }
        });
      } else {
        this.$message({
          message: "请输入手机号",
          type: "warning",
        });
      }
    },
    // 登录
    goLogin() {
      if (this.account == "") {
        this.$message({
          message: "请输入手机号",
          type: "warning",
        });
      } else if (this.securityCode == "") {
        this.$message({
          message: "验证码为空，请输入",
          type: "warning",
        });
      } else {
        this.$post("/login/oauth2/loginByCode", {
          tel: this.account,
          code: this.securityCode,
        }).then((res) => {
          console.log(res.data);
          if (res.data.code == 200) {
            // this.$router.push("/home");
            let userMsg = {
              tel: res.data.data.user.account,
              token: res.data.data.user.token,
              userId: res.data.data.user.userId,
              userName: res.data.data.user.userName,
            };
            console.log(userMsg);
            sessionStorage.setItem("userMsg", JSON.stringify(userMsg));
            this.$router.push("/oms")
          } else {
            this.$message(res.data.msg);
          }
        });
      }
    },
  },
  watch: {
    time(xin, jiu) {
      // console.log(xin + "新");
      // console.log(jiu + "旧");
      if (xin == 0) {
        clearInterval(this.jishi);
        this.time = "";
      }
    },
  },
};
</script>
<style scoped>
.box {
  width: 100vw;
  height: 100vh;
  background-color: #191c2c;
  position: relative;
}
.form {
  width: 390px;
  /* border: 1px solid; */
  line-height: 60px;
  color: #cccccc;
  background-color: #23305a;
  position: absolute;
  top: 25%;
  right: 7%;
  padding: 20px;
  z-index: 15;
}
.form_main {
  margin: 0 25px;
}
.title {
  display: flex;
  color: #2ec0f6;
}
.bg {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.leftTitle {
  position: absolute;
  left: 10%;
  top: 25%;
  color: #2ec0f6;
  z-index: 10;
}
.leftTitle h1 {
  font-family: 微软雅黑;
}

.rotateImg {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  animation: aaa 5s linear infinite;
  transform-style: preserve-3d;
}
.rotateImg img {
  position: absolute;
}
.rotateImg img:nth-child(1) {
  transform: translateZ(-180px);
}
.rotateImg img:nth-child(2) {
  transform: translate(-100px, 0) rotateY(-0deg);
}
.rotateImg img:nth-child(3) {
  transform: translate(100px, 0) rotateY(90deg);
}
.rotateImg img:nth-child(4) {
  transform: translate(-240px, 0px) rotateY(112deg);
}
.zhu {
  color: #cccccc;
  font-size: 13px;
}
@keyframes aaa {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@keyframes bbb {
  0% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(180deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}
</style>